/*
* @Author: zhaoying
* @Date: 2020-08-28
* 步骤条
* 说明：1、如果需要全部选中，则需要传入步骤总数，即step = 5；
*       2、如果需要跳到某一步骤，传入当前步骤数值即可
*       3、点击某一步骤时，会向父组件传当前的步骤数值，父组件需要使用 this.$emit('changeToSteps', index) 接收数据
*       4、步骤的具体数据需要在父组件中传入一下，方便不同情景使用
*/

<!-- Step.vue  -->
<template>
    <div class="stepOut">
        <ul>
            <li class="stepItem" v-for="(stepItem, index) in stepList" :key="index">

                <!-- 模拟步骤条的节点，此处为圆圈 -->
                <div :class="stepNow > index ? 'icon active': 'icon'">
                    <span :class="stepNow > index ? 'icon_span': ''" @click.stop="changeStep(index)">{{index + 1}}</span>
                </div>
<!--                 <div class="icon" v-else>
                    <span>{{index + 1}}</span>
                </div> -->

                <!-- 模拟步骤条连接线，动态显示  -->
                <div :class="stepNow > index ? 'line lineActive':'line'" v-show="index !== stepList.length-1"></div>

                <!-- 步骤名称 切换不同步骤组件使用 stepInfo.step -->
                <p :class="stepNow > index ? 'stepStatus  stepStatusActive':'stepStatus'">{{stepItem.title}}</p>
                
                <!-- <p v-else :class="index == 3 ? 'stepStatus stepStatusLong':'stepStatus'">{{stepItem.title}}</p> -->

            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'steps',
        
        props: ["stepList", "step"],

        data(){
            return {
                stepNow: 0, //保存每次的新step
            }
        },

        mounted(){
            // 进来后先保存一次
            this.stepNow = this.step
        },

        watch:{
            step(newVal, oldVal){
                if( newVal > this.stepNow){
                    this.stepNow = newVal
                }
            },
        },

        methods: {

            //改变进度
            changeStep(index){

                if( this.stepNow > index){
                    //再触发父元素修改新的step
                    this.$emit('changeToSteps', index+1);
                }

                //点击时，先保存现在的进度
                // this.stepNow = this.step;

                
            },

            // clickToSteps(index) {
            //     console.log( index )
            //     this.$emit('changeToSteps', index);
            // }
        }
    }
</script>

<style lang="less" scoped>
    .stepOut {
        background: #F9F7F6;
        width: 100%;
        height: 4rem;
        display: flex;
        justify-content: center;
        padding-top: 1.1rem;
        /*margin-top: 2.2rem;*/

        ul {
            display: flex;
            justify-content: center;
            width: 100%;

            .stepItem {
                width: 18%;
                height: 70px;
                float: left;
                /*font-family: SimSun;*/
                font-size: 0.6rem;
                text-align: center;
                position: relative;

                .icon {
                    display: inline-block;
                    width: 0.9rem;
                    height: 0.9rem;
                    /* line-height: 0.9rem; */
                    /* text-align: center; */
                    /* font-size: 0.6rem; */
                    /* margin: 0 auto; */
                    position: relative;
                    /* z-index: 888; */
                    color: #C1C5CE;
                    border: 1px solid #C1C5CE;
                    border-radius: 50%;
                    /* overflow: hidden; */
                    background: #ffffff;
                    box-sizing: content-box;

                    span {
                        display: inline-block;
                        width: 0.74rem;
                        height: 0.74rem;
                        line-height: 0.74rem;
                        border-radius: 50%;
                        /* background: #ffffff; */
                        /* text-align: center; */
                        /* position: relative; */
                        /* top: -3px; */
                        /* vertical-align: top; */
                        /* margin-top: 0.053rem; */
                        font-size: .6rem;
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                    }
                }
                .active {
                    border: 1px solid rgba(255,101,0,0.50);
                    color: #ffffff;

                    .icon_span {
                        // display: inline-block;
                        // width: 0.7rem;
                        // height: 0.7rem;
                        // line-height: 0.7rem;
                        background-color: #FF6500;
                        // border-radius: 50%;
                        // position: relative;
                        // top: -3px;
                        // text-align: center;
                        // cursor: pointer;
                    }
                }
                .line {
                    position: absolute;
                    top: .45rem;
                    // top: 8px;
                    left: 70%;
                    /*left: 66%;*/
                    border-bottom: 2px dotted  #C1C5CE;
                    width: 58%;
                    /*width: 50px;*/
                    z-index: 111;
                }
                .lineActive {
                    border-bottom: 2px dotted #FF6500;
                }
                .stepStatus {
                    line-height: 25px;
                    font-family: PingFangSC-Regular;
                    color: #91959E;
                }
                .stepStatusActive {
                    color: #FF6500;
                }
                .stepStatusLong {
                    line-height: 25px;
                    position: absolute;
                    width: 100px;
                    left: -12px;
                    font-family: PingFangSC-Regular;
                }
                .statusTime {
                    color: rgba(87, 87, 87, 1);
                    opacity: 0.5;
                }
            }
        }

    }
</style>
